<script setup>
import zwxck from "@/assets/images/zwxck.png"
import gtmx from "@/assets/images/gtmx.png"
import zgjk from "@/assets/images/zgjk.png"
const sidebarLinks = {
  countryInfo: [
    { title: '国家概况', icon: 'mdi-chevron-right' },
    { title: '经贸开发', icon: 'mdi-chevron-right' },
    { title: '中国商会', icon: 'mdi-chevron-right' },
  ],
  investmentGuide: [
    { title: '印度尼西亚(2024年版)', icon: 'mdi-chevron-right' },
    { title: '其他国别(地区)', icon: 'mdi-chevron-right' },
  ],
  aboutUs: [
    { title: '参赞致辞', icon: 'mdi-chevron-right' },
    { title: '联系方法', icon: 'mdi-chevron-right' },
  ],
};
</script>

<template>
  <div class="page-wrapper">
    <!-- 1. 顶部红色细线 -->
    <div class="top-red-bar"></div>

    <v-container>
      <!-- 2. 主头部 -->
      <v-toolbar flat class="main-header">
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <div class="logo-container">
          <img src="/src/assets/images/guobiao.png" alt="中华人民共和国商务部" class="logo-emblem">
        </div>
        <v-divider vertical class="mx-4"></v-divider>
          <div>
            <div class="logo-title-right">中华人民共和国驻印度尼西亚共和国大使馆经济商务处</div>
            <div class="logo-subtitle-right">Economic and Commercial Office of the Embassy of the People's Republic of China in the Republic of Indonesia</div>
        </div>
        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </v-toolbar>

      <!-- 3. 主导航栏 -->
      <v-toolbar flat density="compact" class="main-nav">
        <v-btn text class="nav-btn">返回主站</v-btn>
        <v-btn text class="nav-btn active">首页</v-btn>
        <v-btn text class="nav-btn">经济形势</v-btn>
        <v-btn text class="nav-btn">贸易投资</v-btn>
        <v-btn text class="nav-btn">绿色发展</v-btn>
        <v-btn text class="nav-btn">数字经济</v-btn>
        <v-btn text class="nav-btn">展会信息</v-btn>
        <v-btn text class="nav-btn">工作动态</v-btn>
        <v-menu open-on-hover>
          <template v-slot:activator="{ props }">
            <v-btn text class="nav-btn" v-bind="props" append-icon="mdi-chevron-down">Commercial News</v-btn>
          </template>
        </v-menu>
      </v-toolbar>

      <!-- 4. 主内容区 (左右分栏) -->
      <v-row class="mt-4">
        <!-- 左侧文章内容 -->
        <v-col cols="12" md="8">
          <div class="article-content">
            <!-- 面包屑 -->
            <v-breadcrumbs :items="['首页', '贸易投资', '双向投资']" class="pa-0 mb-4"></v-breadcrumbs>

            <!-- 文章元数据 -->
            <div class="article-meta">
              <span>来源：驻印度尼西亚共和国大使馆经济商务处</span>
              <span>类型：编译</span>
              <span>分类：新闻</span>
              <v-spacer></v-spacer>
              <v-icon size="small" class="mr-2">mdi-printer</v-icon>
              <span class="font-size-controls">A<sup>-</sup> A<sup>+</sup></span>
            </div>
            <div class="article-date">2024-03-04 12:06</div>

            <v-divider class="my-4"></v-divider>

            <!-- 文章标题和正文 -->
            <h1 class="article-title">印尼放宽电动汽车本地化率要求</h1>
            <div class="article-body">
              <p>安塔拉通讯社3月1日报道，印尼政府修订了电动汽车“组装中”国内零部件水平（TKDN）的要求，以吸引更多投资并加快印尼电动汽车市场的发展。</p>
              <p>印尼工业部运输设备和国防设备海事工业总司长表示，规定于2024年执行的TKDN不得低于40%要求，将延迟至2026年实施。此外，印尼政府还为电动汽车行业提供各种激励措施，包括免税期等。</p>
            </div>
          </div>
        </v-col>

        <!-- 右侧侧边栏 -->
        <v-col cols="12" md="4">
          <div class="sidebar">
            <!-- 图标 -->
            <v-img :src="zgjk" class="my-4"></v-img>
            <v-img :src="zwxck" class="my-4"></v-img>
            <v-img :src="gtmx" class="my-4"></v-img>

            <!-- 链接列表 -->
            <div class="sidebar-link-section">
              <h3 class="sidebar-title">驻在国(地区)情况</h3>
              <v-list dense>
                <v-list-item v-for="item in sidebarLinks.countryInfo" :key="item.title" :prepend-icon="item.icon" :title="item.title"></v-list-item>
              </v-list>
            </div>

            <div class="sidebar-link-section">
              <h3 class="sidebar-title">投资合作国别(地区)指南</h3>
              <v-list dense>
                <v-list-item v-for="item in sidebarLinks.investmentGuide" :key="item.title" :prepend-icon="item.icon" :title="item.title"></v-list-item>
              </v-list>
            </div>

            <div class="sidebar-link-section">
              <h3 class="sidebar-title">关于我们</h3>
              <v-list dense>
                <v-list-item v-for="item in sidebarLinks.aboutUs" :key="item.title" :prepend-icon="item.icon" :title="item.title"></v-list-item>
              </v-list>
            </div>
          </div>
        </v-col>
      </v-row>
    </v-container>

    <!-- 5. 底部 Footer -->
    <v-footer class="page-footer">
      <v-container>
        <div class="main-footer">
          <div>
            <span class="font-weight-bold">链接：</span>
            <a href="#">中国政府网</a>
            <a href="#">地方商务主管部门</a>
            <a href="#">相关社团</a>
          </div>
          <v-spacer></v-spacer>
          <div>
            <a href="#">English</a> <a href="#">Français</a> <a href="#">Русский</a> <a href="#">Español</a> <a href="#">Deutsch</a>
          </div>
        </div>
        <div class="copyright-info">
          <p>主办单位：中华人民共和国商务部 网站标识码bm22000001 京ICP备05004093号-1 网站管理：商务部电子商务和信息化司 技术支持：中国国际电子商务中心 技术支持电话：010-65193026</p>
          <p>网站服务电话：010-65193020 统一平台技术支持电话：010-67870108 邮编：商务部邮编</p>
        </div>
      </v-container>
    </v-footer>
    <div class="sub-footer">
      <a href="#">网站管理</a> | <a href="#">网站地图</a> | <a href="#">网站声明</a> | <a href="#">信息统计</a> | <a href="#">怀念旧站</a> | <a href="#">联系我们</a> | <a href="#">内部邮箱</a>
    </div>

  </div>
</template>

<style scoped>
.page-wrapper {
  background-color: #fff;
}
.top-red-bar {
  height: 15px;
  background-color: #c00;
}

.main-header {
  border-bottom: 1px solid #eee;
}
.logo-container {
  display: flex;
  align-items: center;
}
.logo-emblem {
  height: 60px;
  margin-right: 15px;
}


.logo-title-right {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: right;
}
.logo-subtitle-right {
  font-size: 10px;
  color: #888;
  white-space: nowrap;
  text-align: right;
}

.main-nav {
  border-bottom: 1px solid #ddd;
}
.nav-btn {
  font-weight: 500;
  font-size: 16px;
}
.nav-btn.active {
  color: #c00;
  border-bottom: 2px solid #c00;
  border-radius: 0;
}

.article-meta, .article-date {
  font-size: 14px;
  color: #888;
  display: flex;
  align-items: center;
}
.article-date {
  margin-top: 8px;
}
.font-size-controls {
  cursor: pointer;
}

.article-title {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin: 30px 0;
}
.article-body p {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 2em;
  text-indent: 2em; /* 首行缩进 */
}

.sidebar-widget-icon {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #eee;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.sidebar-widget-icon:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}
.sidebar-widget-icon span {
  margin-left: 10px;
  font-size: 15px;
}
.sidebar-title {
  font-size: 18px;
  border-bottom: 2px solid #c00;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.sidebar-link-section {
  margin-top: 20px;
}
.v-list-item {
  min-height: 36px !important;
}

.page-footer {
  background-color: #f2f2f2 !important;
  color: #666;
  font-size: 12px;
  padding: 20px 0;
}
.main-footer, .copyright-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.main-footer a {
  color: #666;
  text-decoration: none;
  margin: 0 10px;
}
.copyright-info p {
  margin: 0;
}

.sub-footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
}
.sub-footer a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}
</style>